<template>
	<view class="payment page">
		<!-- 根据路由参数中的订单信息展示商品信息 -->
		<view class="product-info box">
			<view class="flex-container j-start">
				<image style="width: 100%;height: 11rem;"
					src="http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg" mode="scaleToFill">
				</image>

			</view>
			<view class="title">{{ orderInfo.wine.wname }}</view>
			<view class="flex-container j-start">
				金额:<input class="input" :value="amount" readonly placeholder="输入金额" />$
			</view>
			<view class="">
				数量：{{orderInfo.quantity}}
			</view>
			<view class="">
				单价：/{{orderInfo.wine.price}}$
			</view>
			<button style="width: 60%;margin-top: 3rem;" @click="openOB" type="warn">支付</button>
		</view>
		<!-- 支付按钮等其他支付相关内容 -->
		<u-popup :show="ispaypass" mode="center">
			<view style="margin: 1rem;z-index: 30000;">
				<u-code-input :dot="true" :disabled-keyboard="true" v-model="paymentPassword" @change="passwordinput"
					:maxlength="6"></u-code-input>
			</view>

		</u-popup>
		<u-keyboard :focus="true" :tooltip="true" :showTips="false" :random="true" :dotDisabled="true"
			@change="keyboard" @backspace="onBackspace" @cancel="cancel" ref="uKeyboard" mode="number"
			:show="iskeyboard"></u-keyboard>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				orderInfo: {
					wine: {}
				},
				ispaypass: false,
				iskeyboard: false,
				paymentPassword: "",
				id: 0,
				amount: null,
			}
		},
		onLoad(val) {
			this.id = val.id

		},
		created() {
			this.getDetail()
		},
		mounted() {


		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {
			openOB() {
				this.ispaypass = true;
				this.iskeyboard = true;
			},
			cancel() {
				this.ispaypass = false;
				this.iskeyboard = false;
				this.paymentPassword = ""
			},
			keyboard(e) {
				console.log(e);
				if (this.paymentPassword.length < 6) {
					this.paymentPassword += e;
					// this.$refs.uKeyboard.backspace()
				}
				if (this.paymentPassword.length >= 6) {
					this.finish()
					//封装的结束函数，后续还有请求接口和判断
				}

			},
			finish() {
				this.ispaypass = false;
				this.iskeyboard = false;
				this.pay()

				this.paymentPassword = ""

			},
			async pay() {
				const param = {
					paymentPassword: this.paymentPassword,
					price: this.amount,
					id: this.id,
					userId: this.userId
				}
				const res = await this.$request.post('/system/logistics-order/toPay', param)
				console.log(res);
				if (res.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						title: '成功主题(带图标)',
						message: res.message,
					})

				} else {

				}
			},
			onBackspace() {
				if (this.paymentPassword.length) {
					this.paymentPassword = this.paymentPassword.substr(0, this.paymentPassword.length - 1);
				}

				console.log("Payment password after backspace:", this.paymentPassword);
			},
			passwordinput(e) {
				this.paymentPassword += e
			},
			async getDetail() {
				const param = {
					id: this.id
				}
				const res = await this.$request.get('/system/logistics-order/loOByKey', param)
				console.log(res);
				if (res.code === 200) {

					this.orderInfo = res.data.w
					console.log(this.orderInfo);
					this.calculateAmount()
				} else {

				}
			},
			calculateAmount() {

				this.amount = parseFloat(this.orderInfo.wine.price * this.orderInfo.quantity).toFixed(2);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		height: 100%;
	}
	/deep/.u-keyboard {
		padding: 0px 0px 0px 0px;
	}

	.product-info {
		margin-top: 2rem;
		padding: 40rpx 20rpx;

		.title {
			font-size: 1rem;
			font-weight: 600;
			margin-top: 1rem;
		}

		.flex-container {
			font-size: 1.3rem;
			padding: 1rem 0;

			.input {
				font-size: 1.4rem;
				width: 80%;
				color: red;

			}
		}
	}
</style>